<template>
  <v-tour name="myTour" :steps="steps">
    <template slot-scope="tour">
      <transition>
        <v-step
          v-if="tour.currentStep === index"
          v-for="(step, index) of tour.steps"
          :key="index"
          :step="step"
          :previous-step="tour.previousStep"
          :next-step="tour.nextStep"
          :stop="tour.stop"
          :is-first="tour.isFirst"
          :is-last="tour.isLast"
          :labels="tour.labels">
          <template v-if="tour.currentStep === 0">
            <div slot="actions">
              <el-button @click="complete(tour)" class="btn btn-primary">跳过引导</el-button>
              <el-button @click="toPrev(tour)" type="primary" v-show="prev">上一步</el-button>
              <el-button @click="toNext(tour)" type="primary" v-if="type==0&&path">下一步</el-button>
              <el-button @click="complete(tour)" type="success" v-else>完成</el-button>
            </div>
          </template>
        </v-step>
      </transition>
    </template>
  </v-tour>
</template>

<script>

    export default {
        name: "VueRour",
        props: ['steps', 'type', 'path', 'prev'],
        methods: {
            init() {
                this.$tours['myTour'].start()
            },
            toPrev(tour) {//addSocialRule
                tour.stop();
                this.$router.push(this.prev)
            },
            toNext(tour) {//addSocialRule
                if (this.path) {
                    this.$router.push(this.path)
                } else {
                    tour.stop();
                    this.$emit('addSocialRule')
                }
            },
            complete(tour) {
                tour.stop();
                //提交请求 - 改变状态值
                if (this.$route.path.indexOf('mail') != -1) {//邮件
                    this.$store.dispatch('set_firstEmail', {type: 0})
                } else {//社交
                    this.$store.dispatch('set_firstSocial', {type: 0})
                }

            }
        }
    }
</script>

<style scoped>

</style>
